<template>
  <Row>
    <Col span="18">
    <Card>
      <p slot="title">规则管理</p>
      <Tree :data="data5" :render="renderContent"></Tree>
    </Card>
    </Col>
    <Modal title="菜单" v-model="treeEdit" class-name="vertical-center-modal" @on-ok="append"
           :mask-closable="false" :closable="false">
      <Form ref="treeForm" :model="treeData" :label-width="40">
        <FormItem label="名称">
          <Input v-model="treeData.name"></Input>
        </FormItem>
        <FormItem label="类型">
          <RadioGroup v-model="treeData.type">
            <Radio label="0">菜单组</Radio>
            <Radio label="1">菜单项</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="链接" v-if="treeData.type === '1'">
          <Input v-model="treeData.url"></Input>
        </FormItem>
      </Form>
    </Modal>
  </Row>
</template>
<style>
  .ivu-tree-arrow i {
    font-size: 18px;
  }
</style>

<script>
  export default {
    name: "Rule",
    data() {
      return {
        treeEdit: false,
        isModified: false,
        currentNode: {},
        currentData: {},
        treeData: {},
        emptyNode: {
          id: '',
          parentId: '',
          name: '',
          url: '',
          type: '0',
          seq: 1,
          expand: true
        },
        data5: [],
        buttonProps: {
          type: "ghost",
          size: "small"
        },
        iconSize: "25"
      };
    },
    methods: {
      renderContent(h, {root, node, data}) {
        if (data.parentId === '0') {
          return h('span', {
            style: {
              display: 'inline-block',
              width: '100%'
            }
          }, [
            h('span', [
              h('Icon', {
                props: {
                  size: this.iconSize,
                  type: 'ios-folder-outline'
                },
                style: {
                  marginRight: '8px'
                }
              }),
              h('span', data.name)
            ]),
            h('span', {
              style: {
                display: 'inline-block',
                float: 'right',
                marginRight: '32px'
              }
            }, [
              h("Button", {
                props: Object.assign({}, this.buttonProps, {
                  type: "success",
                  icon: "plus-round"
                }),
                on: {
                  click: () => {
                    this.add(data);
                  }
                }
              }, "添加"),
            ])
          ]);
        }
        else if (data.type === '1') {
          return h(
            "span",
            {
              style: {
                display: "inline-block",
                width: "100%"
              }
            },
            [
              h("span", [
                h("Icon", {
                  props: {
                    size: this.iconSize,
                    type: "ios-paper-outline"
                  },
                  style: {
                    marginRight: "8px"
                  }
                }),
                h("span", data.name)
              ]),
              h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    float: "right",
                    marginRight: "32px"
                  }
                },
                [
                  h("Button", {
                    props: Object.assign({}, this.buttonProps, {
                      type: "info",
                      icon: "edit"
                    }),
                    style: {
                      marginRight: "8px"
                    },
                    on: {
                      click: () => {
                        this.edit(data, node);
                      }
                    }
                  }, "修改"),
                  h("Button", {
                    props: Object.assign({}, this.buttonProps, {
                      type: "error",
                      icon: "minus-round"
                    }),
                    on: {
                      click: () => {
                        this.remove(root, node, data);
                      }
                    }
                  }, "删除")
                ]
              )
            ]
          );
        }
        else {
          return h(
            "span",
            {
              style: {
                display: "inline-block",
                width: "100%"
              }
            },
            [
              h("span", [
                h("Icon", {
                  props: {
                    size: this.iconSize,
                    type: "ios-paper-outline"
                  },
                  style: {
                    marginRight: "8px"
                  }
                }),
                h("span", data.name)
              ]),
              h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    float: "right",
                    marginRight: "32px"
                  }
                },
                [
                  h("Button", {
                    props: Object.assign({}, this.buttonProps, {
                      type: "success",
                      icon: "plus-round"
                    }),
                    style: {
                      marginRight: "8px"
                    },
                    on: {
                      click: () => {
                        this.add(data);
                      }
                    }
                  }, "添加"),
                  h("Button", {
                    props: Object.assign({}, this.buttonProps, {
                      type: "info",
                      icon: "edit"
                    }),
                    style: {
                      marginRight: "8px"
                    },
                    on: {
                      click: () => {
                        this.edit(data, node);
                      }
                    }
                  }, "修改"),
                  h("Button", {
                    props: Object.assign({}, this.buttonProps, {
                      type: "error",
                      icon: "minus-round"
                    }),
                    on: {
                      click: () => {
                        this.remove(root, node, data);
                      }
                    }
                  }, "删除")
                ]
              )
            ]
          );
        }
      },
      filterTree() {
        return this.data5.children.filter(e => {
          if (e.children !== undefined)
            return e;
        })
      },
      edit(data, node) {
        this.treeEdit = true;
        this.treeData = data;
        this.isModified = true;
      },
      add(data) {
        this.treeEdit = true;
        this.treeData = Object.assign({}, this.emptyNode);
        this.currentData = data;
        this.isModified = false;
      },
      append() {
        this.treeEdit = false;
        if (this.isModified) {
          console.log(this.currentData)
        } else {
          const children = this.currentData.children || [];
          this.treeData.parentId = this.currentData.id;
          children.push(this.treeData);
          this.$set(this.currentData, "children", children);
        }
        this.saveRule();
      },
      remove(root, node, data) {
        const parentKey = root.find(el => el === node).parent;
        const parent = root.find(el => el.nodeKey === parentKey).node;
        const index = parent.children.indexOf(data);
        parent.children.splice(index, 1);
      },
      buildTree(node, arrs) {
        const children = [];
        arrs.forEach(e => {
          if (e.parentId === node.id) {
            if (e.type === '0') { this.buildTree(e, arrs); }
            children.push(e);
          }
        });
        this.$set(node, "children", children);
      },
      init() {
        this.$axios({
          method: 'get',
          url: '/api/root'
        }).then((res) => {
          const resArr = res.data.result;
          resArr.forEach(e => this.$set(e, "expand", true));
          let rootNode = resArr.find(e => e.parentId === "0");
          this.buildTree(rootNode, resArr);
          this.data5.push(rootNode);
          this.$Notice.success({
            title: '加载成功!'
          });
        }).catch((error) => {
          this.$Notice.error({
            title: '加载失败!'
          });
          console.log(error);
        });
      },
      saveRule() {
        this.$axios({
          method: 'post',
          url: `/api/root/${this.treeData.id}`,
          data: {
            root: this.treeData
          }
        }).then(res => {
          console.log(res);
        })
      }
    },
    mounted() {
      this.init();
    }
  };
</script>
